<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改资料</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="zhz">
    <meta name="time" content="2022/2/28">
    <link href="/static/img/favicon.ico" rel="shortcut icon">
    <link href="../../static/css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/my/common/default.css" rel="stylesheet">
    <link href="../../static/css/my/modifyProfile.css" rel="stylesheet">
    <link href="../../static/css/my/common/header.css" rel="stylesheet">
    <link href="../../static/css/my/common/modal.css" rel="stylesheet">
</head>
<body>

<div class="myContainer">
    <div th:replace="~{common/header}"></div>
    <main id="main" class="w-100 d-flex justify-content-center align-items-center">
        <div class="sidebar d-flex justify-content-center align-items-center">
            <ul class="nav nav-pills flex-column text-center">
                <li class="nav-item"><a class="nav-link active" href="">修改资料</a></li>
                <li class="nav-item"><a class="nav-link" href="/modifyPwd">修改密码</a></li>
            </ul>
        </div>
        <div class="modifyProfile d-flex justify-content-center align-items-center">
            <form>
                <div class="d-flex justify-content-center">
                    <input disabled type="file" accept=".png,.jpg" id="selectHp" onchange="showHp()">
                    <img th:src="${user.getHeadPortrait()}" onclick="$('#selectHp').click()" id="headPortrait"
                         class="rounded-circle" alt="" title="请点击修改按钮后再来点击选择新的头像" width="85" height="85">
                </div>
                <div class="row align-items-center">
                    <label for="username">用户名</label>
                    <input th:value="${user.getUsername()}" disabled type="text" id="username" class="form-control">
                    <label for="email">邮箱</label>
                    <input th:value="${user.getEmail()}" disabled type="email" id="email" class="form-control">
                </div>
                <div class="row align-items-center">
                    <label for="phoneNumber">手机号码</label>
                    <input th:value="${user.getPhoneNumber()}" disabled type="tel" id="phoneNumber"
                           class="form-control">
                    <label id="sex">性别</label>
                    <label for="man">男</label>
                    <input disabled type="radio" id="man" name="sex" th:checked="${user.getSex()==true}" value="true">
                    <label for="women">女</label>
                    <input disabled type="radio" id="women" name="sex" th:checked="${user.getSex()==false}"
                           value="false">
                </div>
                <div class="row align-items-center">
                    <label for="birthday">生日</label>
                    <input disabled type="date" th:value="${user.getBirthday()}" id="birthday" class="form-control">
                    <label for="hometown">家乡</label>
                    <input disabled type="text" id="hometown" th:value="${user.getHometown()}" class="form-control">
                </div>
                <div class="row align-items-center">
                    <label for="introduce">简介</label>
                    <input disabled type="text" id="introduce" th:value="${user.getIntroduce()}" class="form-control">
                </div>
                <div class="row justify-content-center">
                    <button onclick="modifyBtnClick()" id="modifyBtn" class="btn btn-primary" type="button">修改</button>
                    <button disabled onclick="cancelBtnClick()" class="btn btn-primary" id="cancelBtn" type="button">取消
                    </button>
                    <button disabled onclick="submitBtnClick()" class="btn btn-primary" id="submitBtn" type="button">提交
                    </button>
                </div>
            </form>
        </div>
    </main>
</div>

<div th:replace="~{common/modal::noticeModal}"></div><!--模态框-->
<script src="../../static/js/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../../static/js/jquery/jquery-3.6.0.min.js"></script>
<script src="../../static/js/my/common/noticeModal.js"></script>
<script src="../../static/js/my/modifyProfile.js"></script>
<script src="../../static/js/other/background.js"></script>
</body>
</html>